<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isNew ? '新建领导' : '修改领导'"
    top="35vh"
    width="500px"
    :before-close="close"
    :close-on-click-modal="false"
  >
    <el-scrollbar max-height="60vh" v-loading="loading">
      <el-form ref="formRef" :model="formData" label-width="100" :rules="rules">
        <el-form-item label="账号：" prop="userId">
          <el-select-v2
            v-model="formData.userId"
            filterable
            :options="userComputedList"
            placeholder="请选择"
          />
        </el-form-item>
        <!--        <el-form-item label="领导类型：" prop="leaderType">-->
        <!--          <DictionarySelect-->
        <!--            v-model="formData.leaderType"-->
        <!--            parent-dictionary-value="leaderType"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <el-form-item label="交办领导：" prop="assignLeaders">
          <el-select v-model="formData.assignLeaders">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, useTemplateRef } from 'vue'
import { ElSelectV2, FormInstance, FormRules } from 'element-plus'
import { addOrUpdateDistrictLeader } from '@/api/sys/leader'
import { Message } from '@/hooks/message'

const emit = defineEmits(['update'])
const formRef = useTemplateRef<FormInstance>('formRef')

const { userList } = defineProps<{
  userList: any[]
}>()

const userComputedList = computed(() => {
  return userList.map((item) => {
    return {
      label: item.name,
      value: item.id,
    }
  })
})

const dialogVisible = ref(false)
const isNew = ref(true)
const loading = ref(false)

const formData = reactive({
  id: null,
  userId: null,
  leaderType: '1',
  assignLeaders: null,
})

const rules = ref<FormRules<typeof formData>>({
  userId: { required: true, message: '请选择用户', trigger: 'blur' },
  leaderType: { required: true, message: '请选择领导类型', trigger: 'blur' },
  assignLeaders: {
    required: true,
    message: '请选择是否交办领导',
    trigger: 'blur',
  },
})

function close() {
  dialogVisible.value = false
  loading.value = false
  isNew.value = true
  Object.assign(formData, {
    id: null,
    userId: null,
    leaderType: '1',
  })
}

defineExpose({ show })

function show(row?: any) {
  dialogVisible.value = true
  if (row) {
    isNew.value = false
    formData.id = row.id
    formData.userId = row.userId
    formData.leaderType = row.leaderType
    formData.assignLeaders = row.assignLeaders
  }
}

function submit() {
  formRef.value.validate().then(async (bool) => {
    if (!bool) {
      return
    }

    const postData = {
      id: formData.id,
      userId: formData.userId,
      leaderType: formData.leaderType,
      assignLeaders: formData.assignLeaders,
    }

    const { data } = await addOrUpdateDistrictLeader(postData)
    if (data.status === 200) {
      Message({
        message: data.message,
        type: 'success',
      })
      emit('update')
      close()
    }
  })
}
</script>

<style scoped lang="scss"></style>
